<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>员工信息</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      table {
        border-collapse: collapse;
        width: 700px;
        height: 400px;
        border: 1px solid skyblue;
      }

      caption {
        font-size: 20px;
        margin: 20px 0;
      }

      tr,
      th,
      td {
        text-align: center;
        border: 1px solid skyblue;
      }

      .total span {
        margin-right: 30px;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        员工信息
      </caption>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>部门</th>
        <th>电话</th>
        <th>工号</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td><a href="#">删除</a> <a href="#">修改</a></td>
      </tr>
    </table>
    <script>
      const mapRes = {
  1: '总裁办',
  2: '秘书',
  3:  '前端开发'
}
      const res = [
        {
          phone: '18730602211',
          name: '章三',
          departmentCode: 1,
          workNumber: '900222'
        },
        {
          phone: '18730602212',
          name: '李四',
          departmentCode: 2,
          workNumber: '900221'
        },
        {
          phone: '18730602213',
          name: '王武',
          departmentCode: 3,
          workNumber: '900211'
        },
        {
          phone: '18730602214',
          name: '张张',
          departmentCode: 1,
          workNumber: '900199'
        }
      ]
      for(let key in mapRes){
       
      }
      const table = document.querySelector('table');
      function render(data){
       const html = data.map((item,index)=>{
         return `<tr>
        <td>${index+1}</td>
        <td>${item.name}</td>
        <td>${mapRes[item.departmentCode]}</td>
        <td>${item.phone}</td>
        <td>${item.workNumber}</td>
        <td><a href="#">删除</a> <a href="#">修改</a></td>
      </tr>`
        })
        table.innerHTML=html.join('')
      }
      render(res)
    </script>
  </body>
</html>
